<template>
    <div class="page">
        <breadcrumb :isShow="false">
            <div class="cart-subtitle">
                <img src="../../assets/cart.svg">
                <span class="middle">Shopping Cart</span>
            </div>
        </breadcrumb>
        <div class="container cart-container-warpper">
            <div class="row">
                <div v-if="list.length<=0" class="cart-empty text-center">
                    <h3>Shopping Cart is Empty</h3>
                    You have no items in your shopping cart.
                    <p class="help-block">Click
                        <router-link :to="{path:'/'}">here</router-link> to continue shopping.</p>
                </div>
                <div v-else class="cart">
                    <div class="cart-headlin">
                        <a href="javascript:;" @click="back">
                            <u>Continue Shopping</u>
                        </a>
                    </div>
                    <div class="cart-container">
                        <div class="cart-header-wrapper clearfix">
                            <div class="item-header-wrapper">Item Description</div>
                            <div class="price-header-warpper">
                                <div class="unit-price-header">Unit Price</div>
                                <div class="quantity-header">Quantity</div>
                                <div class="subtotal-header">Subtotal</div>
                                <div class="remove-header">
                                    <span class="icon-remove" @click="removeAll"></span>
                                </div>
                            </div>
                        </div>
                        <each-list v-for="(item,index) in list" :key="index" :items="item" v-on:remove="remove(index)"></each-list>
                    </div>
                    <coupon v-on:setCoupon="setCoupon"></coupon>
                    <total :totalPrice="totalPrice" :shippingPrice="shipping_price" :couponCode="coupon_code" :couponCodeText="coupon_code_text"></total>
                    <ul class="checkout-types pull-right list-unstyled list-inline">
                        <li>
                            <button type="button" class="button btn submit-button-bg" @click.stop="onCheckout">
                                <span>Complete Order</span>
                            </button>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import mixin from '../../mixin'
import api from '../../http'
import breadcrumb from '../../components/common/Breadcrumbs'
import EachList from '../../components/Cart/EachList' // 列表
import coupon from '../../components/Cart/Coupon' // 优惠码
import total from '../../components/Cart/Total' // 总价
export default {
    mixins: [mixin],
    data() {
        return {
            shipping_price: 0,
            coupon_code: 1,
            coupon_code_text: '',
            list: []
        }
    },
    mounted() {
        this.$parent.showCartSlider = false
        api.GetCartItem().then(response => {
            this.shipping_price = response.data.shipping_price
            this.list = response.data.lists
        })
    },
    components: {
        breadcrumb,
        EachList,
        coupon,
        total
    },
    computed: {
        totalPrice() {
            return this.setTotal(this.list)
        }
    },
    methods: {
        removeAll() {
            this.list = []
        },
        remove(index) {
            this.list.splice(index, 1)
        },
        setCoupon(val) {
            if (!val) return false
            this.coupon_code_text = val
            this.coupon_code = 0.08
        },
        onCheckout() {
            this.$router.push({ path: '/firecheckout' })
        }
    }
}
</script>
<style>
.cart-empty {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 10% 0;
}
</style>
